<template>
	<view class="load-more">
		<!--加载中-->
		<view class="loading" v-if="loading && !finished">
			<text class="text">拼命加载中...</text>
		</view>

		<!--加载完成-->
		<view class="finished" v-if="finished && !empty">
			<text class="text">没有更多了~</text>
		</view>

		<!-- 空页面展示 -->
		<view class="empty" v-if="empty">
			<image mode="widthFix" class="image" :src="emptyImage" />
			<text class="text">{{ emptyText }}</text>
			<view class="auth-btn" v-if="show" @click="$emit('open')">绑定更多联盟账号</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'LoadMore',
		props: {
			loading: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			finished: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			empty: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			emptyImage: {
				type: String,
				default: '../static/common/none.png'
				// default: () => {
				// 	return require('../sta');
				// }
			},
			emptyText: {
				type: String,
				default: () => {
					return '暂无数据~';
				}
			},
			show: {
				type: Boolean,
				default: () => {
					return false;
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.load-more {
		width: 100%;
		color: #969799;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;

		.loading {
			width: 100%;
			color: #969799;
		}

		.finished {
			color: #969799;
			// border-top: 2rpx solid #969799;
		}

		.empty {
			width: 70%;
			margin: 30rpx auto;

			.image {
				width: 111rpx;
				height: 142rpx;
				display: block;
				margin: 0 auto;
			}

			.auth-btn {
				margin: 0 auto;
				width: 342rpx;
				height: 72rpx;
				border-radius: 42rpx;
				background-color: $main-color;
				line-height: 72rpx;
				color: white;
				text-align: center;
				margin-top: 26rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
